<template>
  <div>
    <div class="title">个人中心</div>
    <div class="btn">
      <el-button type="primary" size="small">返回</el-button>
    </div>
    <div class="flex">
      <div class="box">
        <div class="box-title">基本信息</div>
        <div class="item-box">
          <div class="item">
            <label>员工编号：</label>
            <span>1111111</span>
          </div>
          <div class="item">
            <label>员工姓名：</label>
            <span>1111111</span>
          </div>
          <div class="item">
            <label>手机号：</label>
            <span>1111111</span>
          </div>
        </div>
        <div class="item">
          <label>角色：</label>
          <span>1111111</span>
        </div>
        <div class="box-title">账号信息</div>
        <div class="item-box">
          <div class="item">
            <label>登录账号：</label>
            <span>1111111</span>
          </div>
          <div class="item">
            <label>密码：</label>
            <span>1111111</span>
            <span class="edit-password">修改密码</span>
          </div>
        </div>
        <div class="item">
          <label>状态：</label>
          <span>1111111</span>
        </div>
      </div>
      <div class="cover-box">
        <div>头像</div>
        <el-upload class="cover" action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
          :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-button type="primary">退出登录</el-button>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .box {
    flex: 1;
    margin-right: 100px;
  }

  .box-title {
    margin-top: 32px;
    color: #1e1e1e;
    font-size: 18px;
    font-weight: 700;
  }

  .item-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .item {
    margin-top: 32px;

    label {
      color: #333;

      font-weight: 700;
    }

  }

  .cover-box {
    text-align: center;

    .cover {
      margin: 16px 0;
    }
  }
  .btn{
    text-align: right;
  }
  .edit-password{
    color: #1890ff;
    margin-left: 32px;
  }
</style>